<template>
  <div class="question-system-container">
    <!-- 顶部导航栏 -->
    <el-container>
      <el-header class="system-header">
        <div class="header-left">
          <el-button 
            v-if="!showMenuArea"
            type="default" 
            icon="Back"
            @click="handleBack"
            class="back-button"
          >
            返回
          </el-button>
          <h1 class="system-title">编程题库系统</h1>
        </div>
        <div class="header-right">
          <!-- 模块按钮将在下方以卡片形式展示 -->
        </div>
      </el-header>
    </el-container>

    <!-- 模块卡片区域 -->
    <div v-if="showMenuArea" class="modules-container">
      <div class="module-card primary" @click="handleInterviewRedirect">
        <h2 class="module-title">模拟面试模块</h2>
        <p class="module-description">提升面试技巧，模拟真实面试场景</p>
        <el-button type="primary" size="large" class="module-card-btn">开始使用</el-button>
      </div>
      <div class="module-card success" @click="openQuestionCountDialog">
        <h2 class="module-title">在线做题模块</h2>
        <p class="module-description">练习各类编程题目，巩固知识基础</p>
        <el-button type="success" size="large" class="module-card-btn">开始做题</el-button>
      </div>
			<div class="module-card primary" @click="handleInterviewRecordRedirect">
			  <h2 class="module-title">模拟面试记录</h2>
			  <p class="module-description">提升面试技巧，模拟真实面试场景</p>
			  <el-button type="primary" size="large" class="module-card-btn">开始使用</el-button>
			</div>
			<div class="module-card success" @click="openAnwserAreaDialog">
			  <h2 class="module-title">在线做题记录</h2>
			  <p class="module-description">练习各类编程题目，巩固知识基础</p>
			  <el-button type="success" size="large" class="module-card-btn">开始做题</el-button>
			</div>
    </div>

    <!-- 做题区域（默认隐藏，选择题数后显示） -->
    <div v-if="showQuestionArea" class="question-area">
      <!-- 提交按钮（右上角固定） -->
      <div class="submit-btn-container">
        <el-button 
          type="primary" 
          size="large" 
          @click="handleSubmit"
        >
          提交答案
        </el-button>
      </div>

      <!-- 主体内容：题目区 + 题号导航区 -->
      <div class="content-wrapper">
        <!-- 题目展示区 -->
        <div class="question-display">
          <div v-if="loadingQuestions" class="loading-container">
            <el-loading-spinner size="large"></el-loading-spinner>
            <p class="loading-text">正在加载题目，请稍候...</p>
          </div>
          <div v-else-if="currentQuestion" class="question-card">
            <!-- 题目信息 -->
            <div class="question-header">
              <span class="question-type-tag" :class="getTypeTagClass(currentQuestion.questionType)">
                {{ currentQuestion.questionType }}题
              </span>
              <span class="question-difficulty">
                难度：<span :class="getDifficultyClass(currentQuestion.difficultyLevel)">
                  {{ currentQuestion.difficultyLevel }}
                </span>
              </span>
            </div>

            <!-- 题目内容 -->
            <div class="question-content">
              <h3 class="question-text">
                {{ currentQuestionIndex + 1 }}. {{ currentQuestion.questionText || '无题目内容' }}
              </h3>

              <!-- 选择题选项 -->
              <div v-if="currentQuestion.questionType === '选择'" class="options-container">
                <el-radio-group 
                  v-model="userAnswers[currentQuestion.id]"
                  class="radio-group select-options-layout"
                >
                  <div class="options-row">
                    <div class="option-item" v-if="currentQuestion.optionA">
                      <el-radio :label="'A'">
                        <span class="option-letter">A. </span>{{ currentQuestion.optionA.replace('A. ', '') }}
                      </el-radio>
                    </div>
                    <div class="option-item" v-if="currentQuestion.optionB">
                      <el-radio :label="'B'">
                        <span class="option-letter">B. </span>{{ currentQuestion.optionB.replace('B. ', '') }}
                      </el-radio>
                    </div>
                  </div>
                  <div class="options-row">
                    <div class="option-item" v-if="currentQuestion.optionC">
                      <el-radio :label="'C'">
                        <span class="option-letter">C. </span>{{ currentQuestion.optionC.replace('C. ', '') }}
                      </el-radio>
                    </div>
                    <div class="option-item" v-if="currentQuestion.optionD">
                      <el-radio :label="'D'">
                        <span class="option-letter">D. </span>{{ currentQuestion.optionD.replace('D. ', '') }}
                      </el-radio>
                    </div>
                  </div>
                </el-radio-group>
              </div>

              <!-- 判断题选项 -->
              <div v-if="currentQuestion.questionType === '判断'" class="options-container">
                <el-radio-group 
                  v-model="userAnswers[currentQuestion.id]"
                  class="radio-group judge-group"
                >
                  <div class="option-item judge-item clickable">
                    <el-radio :label="'正确'">正确</el-radio>
                  </div>
                  <div class="option-item judge-item clickable">
                    <el-radio :label="'错误'">错误</el-radio>
                  </div>
                </el-radio-group>
              </div>

              <!-- 简答题输入框 -->
              <div v-if="currentQuestion.questionType === '简答'" class="options-container">
                <el-input
                  v-model="userAnswers[currentQuestion.id]"
                  type="textarea"
                  :rows="6"
                  placeholder="请在此输入您的答案..."
                  class="answer-textarea"
                />
              </div>
            </div>

            <!-- 题目导航按钮 -->
            <div class="question-nav-buttons">
              <el-button 
                @click="prevQuestion" 
                :disabled="currentQuestionIndex === 0"
                icon="ArrowLeft"
              >
                上一题
              </el-button>
              <el-button 
                @click="nextQuestion" 
                :disabled="currentQuestionIndex === selectedQuestions.length - 1"
                icon="ArrowRight"
              >
                下一题
              </el-button>
            </div>
          </div>
          <div v-else class="no-question">
            <p>暂无题目数据，请重新选择题数加载</p>
            <el-button @click="openQuestionCountDialog">重新选择题数</el-button>
          </div>
        </div>

        <!-- 右侧题号导航区 -->
        <div class="question-navigator">
          <h3 class="navigator-title">题目导航</h3>
          <div class="question-numbers">
            <div 
              v-for="(question, index) in selectedQuestions"
              :key="question.id"
              class="question-number-item"
              :class="{
                'active': index === currentQuestionIndex,
                'answered': !!userAnswers[question.id],
                'unanswered': !userAnswers[question.id]
              }"
              @click="switchToQuestion(index)"
            >
              {{ index + 1 }}
            </div>
          </div>
          <div class="navigator-legend">
            <div class="legend-item">
              <div class="legend-dot active"></div>
              <span>当前题</span>
            </div>
            <div class="legend-item">
              <div class="legend-dot answered"></div>
              <span>已答题</span>
            </div>
            <div class="legend-item">
              <div class="legend-dot unanswered"></div>
              <span>未答题</span>
            </div>
          </div>
        </div>
      </div>
    </div>
		<anwserRecord v-if="showAnwserArea" />
		<aiInterview v-if="showAiInterView"></aiInterview>
    <aiRecords v-if="showAiRecords"></aiRecords>
		<!-- 选择题数弹框 -->
    <el-dialog
      v-model="questionCountDialogVisible"
      title="选择做题数量"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <el-input-number
          v-model="questionCount"
          :min="1"
          :max="availableQuestionCount"
          label="题数"
          class="number-input"
        />
        <p class="tip-text">
          提示：当前题库共有 {{ availableQuestionCount }} 道有效题目，最多可选择 {{ availableQuestionCount }} 题
        </p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="questionCountDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmQuestionCount">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 提交确认弹框 -->
    <el-dialog
      v-model="submitConfirmDialogVisible"
      title="确认提交答案？"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="submit-confirm-content">
        <p v-if="unansweredCount > 0" class="warning-text">
          ⚠️ 注意：您还有 {{ unansweredCount }} 道题目未作答，提交后将无法修改！
        </p>
        <p v-else class="success-text">
          ✅ 您已完成所有题目作答，确认提交吗？
        </p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="submitConfirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSubmit">确认提交</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 提交结果弹框 -->
    <el-dialog
      v-model="submitResultDialogVisible"
      title="提交结果"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="submit-result-content">
        <div class="result-icon success">
          <el-icon size="48"><Check /></el-icon>
        </div>
        <h3 class="result-title">答案提交成功！</h3>
        <div class="result-stats">
          <div class="stat-item">
            <span class="stat-label">总题数：</span>
            <span class="stat-value">{{ selectedQuestions.length }} 道</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">已答题数：</span>
            <span class="stat-value">{{ selectedQuestions.length - unansweredCount }} 道</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">未答题数：</span>
            <span class="stat-value">{{ unansweredCount }} 道</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">提交时间：</span>
            <span class="stat-value">{{ submitTime }}</span>
          </div>
        </div>
        <p class="result-tip">
          提示：答案已保存到本地存储（模拟数据库），后续可在"我的答题记录"中查看
        </p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="resetQuestionArea">重新做题</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ArrowLeft, ArrowRight, Check, Back } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { get, post } from '@/axios'
import { dayjs } from 'element-plus'
import anwserRecord from '@@/anwser/record'
import aiInterview from '@@/ai'
import aiRecords from '@@/ai/records'
// -------------------------- 基础状态管理 --------------------------
// 模块切换状态
const showMenuArea = ref(true)
const showQuestionArea = ref(false) // 是否显示做题区域
const questionCountDialogVisible = ref(false) // 选择题数弹框显示状态
const submitConfirmDialogVisible = ref(false) // 提交确认弹框显示状态
const submitResultDialogVisible = ref(false) // 提交结果弹框显示状态
const showAnwserArea = ref(false)
const showAiInterView = ref(false)
const showAiRecords = ref(false)
// 加载状态
const loadingQuestions = ref(false) // 题目加载中状态
const submitLoading = ref(false) // 提交加载中状态

// 题数相关
const questionCount = ref(1) // 用户选择的题数
const selectedQuestions = ref([]) // 选中的题目列表
const currentQuestionIndex = ref(0) // 当前题目索引
const userAnswers = ref({}) // 用户答案存储 { questionId: answer }

// -------------------------- 模拟题库数据 --------------------------
// 基于数据库表结构模拟的有效题目数据（过滤空题目）
const mockQuestions = ref()

// -------------------------- 计算属性 --------------------------
// 可用题目数量（过滤空题目）
const availableQuestionCount = ref(1)

getQuestionCount() 
function getQuestionCount() {
	get('/questions/getCount', {}, content => {
		availableQuestionCount.value = content
	})
}


// 当前题目
const currentQuestion = computed(() => {
  return selectedQuestions.value[currentQuestionIndex.value] || null
})

// 未答题数量
const unansweredCount = computed(() => {
  return selectedQuestions.value.filter(question => {
    return !userAnswers.value[question.id] // 空字符串、undefined 都视为未答题
  }).length
})

// 提交时间格式化
const submitTime = ref('')

// -------------------------- 方法定义 --------------------------
// 1. 返回按钮处理
const handleBack = () => {
  if (!showMenuArea.value) {
    // 在做题界面，点击返回退出做题
    showQuestionArea.value = false
		showMenuArea.value = true
		showAnwserArea.value = false
		showAiInterView.value = false
		showAiRecords.value = false
    selectedQuestions.value = []
    userAnswers.value = {}
    currentQuestionIndex.value = 0
    ElMessage.info('已退出做题模式')
  } else {
    // 非做题界面，模拟返回上一页
    ElMessage.info('返回上一页（实际项目中使用 router.back()）')
  }
}

// 2. 模拟面试模块 - 跳转页面
const handleInterviewRedirect = () => {
  showAiInterView.value = true
	showAiRecords.value = false
	showMenuArea.value = false
	showAnwserArea.value = false
	showQuestionArea.value = false
}

const handleInterviewRecordRedirect = () => {
	showAiInterView.value = false
	showAiRecords.value = true
	showMenuArea.value = false
	showAnwserArea.value = false
	showQuestionArea.value = false
}

// 2. 在线做题模块 - 打开题数选择弹框
const openQuestionCountDialog = () => {
  questionCountDialogVisible.value = true
  // 重置题数为1
  questionCount.value = 1
}
const openAnwserAreaDialog = () => {
	showAnwserArea.value = true
	showMenuArea.value = false
	showAiInterView.value = false
	showAiRecords.value = false
	showQuestionArea.value = false

}
// 3. 确认题数选择 - 加载题目
const confirmQuestionCount = () => {
  if (!questionCount.value || questionCount.value < 1) {
			ElMessage.warning('请选择有效的题数（至少1题）')
			return
	}
	// 关闭弹框，显示做题区域
	questionCountDialogVisible.value = false
	showQuestionArea.value = true
	showMenuArea.value = false
	loadingQuestions.value = true
	showAnwserArea.value = false
	showAiInterView.value = false
	showAiRecords.value = false
	// 调用加载题目方法
	getQuestions (questionCount.value)
}

function getQuestions (count) {
	get('/questions/practice', {count}, content => {
		selectedQuestions.value = content
		loadingQuestions.value = false
		const initialAnswers = {}
		selectedQuestions.value.forEach (question => {
			initialAnswers [question.id] = '' // 初始化为空字符串
		})
		userAnswers.value = initialAnswers
		// 重置当前题目索引
		currentQuestionIndex.value = 0
		ElMessage.success(`成功加载 ${questionCount.value} 道题目`)
	})
}

// 4. 切换题目（上一题 / 下一题）
const prevQuestion = () => {
	if (currentQuestionIndex.value > 0) {
		currentQuestionIndex.value--
	}
}

const nextQuestion = () => {
if (currentQuestionIndex.value < selectedQuestions.value.length - 1) {
currentQuestionIndex.value++
}
}

// 5. 通过题号导航切换题目
const switchToQuestion = (index) => {
if (index >= 0 && index < selectedQuestions.value.length) {
currentQuestionIndex.value = index
}
}

// 6. 提交答案 - 先显示确认弹框
const handleSubmit = () => {
// 检查是否有题目未答，给出提示但仍允许提交
	if (unansweredCount.value > 0) {
		ElMessage.warning(`您还有 ${unansweredCount.value} 道题目未作答，提交后将无法修改`)
	}
	selectedQuestions.value.map(i => {
		i.userAnswer = userAnswers.value[i.id]
	})
	console.dir(selectedQuestions)
	submitConfirmDialogVisible.value = true
}

// 7. 确认提交 - 模拟保存到数据库
const confirmSubmit = () => {
	submitConfirmDialogVisible.value = false
	submitLoading.value = true
	selectedQuestions.value.map(i => {
		i.answer = userAnswers.value[i.id]
	})
	post('/userAnswer/save', { content: JSON.stringify(selectedQuestions.value)  }, content => {
		submitTime.value = dayjs(new Date()).format('YYYY-MM-DD hh:mm:ss')
		submitResultDialogVisible.value = true
	})
}
// 8. 重置做题区域 - 重新开始
const resetQuestionArea = () => {
submitResultDialogVisible.value = false
showQuestionArea.value = false
showMenuArea.value = true
selectedQuestions.value = []
userAnswers.value = {}
currentQuestionIndex.value = 0
}

// 9. 辅助方法 - 获取题目类型标签样式
const getTypeTagClass = (type) => {
switch (type) {
case ' 选择 ': return 'type-tag primary'
case ' 判断 ': return 'type-tag warning'
case ' 简答 ': return 'type-tag success'
default: return 'type-tag info'
}
}

// 10. 辅助方法 - 获取难度标签样式
const getDifficultyClass = (difficulty) => {
switch (difficulty) {
case ' 简单 ': return 'difficulty easy'
case ' 中等 ': return 'difficulty medium'
case ' 困难 ': return 'difficulty hard'
default: return 'difficulty normal'
}
}
</script>

<style scoped>
/* 全局容器样式 */
.question-system-container {
width: 100%;
min-height: 100vh;
background-color: #f5f7fa;
padding-bottom: 40px;
}

/* 顶部导航栏样式 */
.system-header {
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0 40px;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-button {
  width: 80px;
}

.system-title {
font-size: 24px;
color: #409eff;
margin: 0;
}

/* 模块卡片容器 */
.modules-container {
  width: 80%;
  margin: 50px auto;
  display: grid;
	grid-template-columns: auto auto; 
  gap: 40px;
}

/* 模块卡片样式 */
.module-card {
  flex: 1;
  min-width: 300px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.module-card.primary {
  background: linear-gradient(135deg, #409eff 0%, #6bb6ff 100%);
  color: white;
}

.module-card.success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  color: white;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.module-title {
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: 600;
}

.module-description {
  font-size: 16px;
  margin-bottom: 25px;
  opacity: 0.9;
}

.module-card-btn {
  padding: 10px 30px;
  font-size: 16px;
}

/* 做题区域样式 */
.question-area {
width: 90%;
margin: 30px auto 0;
position: relative;
}

/* 提交按钮固定定位，调整位置避免与导航卡片重叠 */
.submit-btn-container {
position: absolute;
top: 20px;
right: 0;
z-index: 10;
background-color: white;
padding: 10px 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 主体内容：题目区 + 导航区 */
.content-wrapper {
display: flex;
gap: 30px;
margin-top: 20px;
}

/* 题目展示区样式 */
.question-display {
flex: 1;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 30px;
min-height: 500px;
display: flex;
flex-direction: column;
}

/* 加载状态样式 */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
}

.loading-text {
margin-top: 20px;
font-size: 16px;
color: #666;
}

/* 题目卡片样式 */
.question-card {
flex: 1;
display: flex;
flex-direction: column;
}

.question-header {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: center;
}

.type-tag {
padding: 4px 12px;
border-radius: 20px;
font-size: 14px;
color: #ffffff;
}

.type-tag.primary {
background-color: #409eff;
}

.type-tag.warning {
background-color: #e6a23c;
}

.type-tag.success {
background-color: #67c23a;
}

.type-tag.info {
background-color: #909399;
}

.question-difficulty {
font-size: 14px;
color: #666;
}

.difficulty {
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
color: #ffffff;
}

.difficulty.easy {
background-color: #67c23a;
}

.difficulty.medium {
background-color: #e6a23c;
}

.difficulty.hard {
background-color: #f56c6c;
}

.difficulty.normal {
background-color: #909399;
}

/* 题目内容样式 */
.question-content {
flex: 1;
}

.question-text {
font-size: 18px;
color: #333;
line-height: 1.6;
margin-bottom: 30px;
font-weight: 500;
}

/* 选项容器样式 */
.options-container {
margin-bottom: 30px;
}

.radio-group {
display: flex;
flex-direction: column;
gap: 15px;
}

/* 选择题选项布局 - 两行排列 */
.select-options-layout {
  display: flex;
  flex-direction: column;
  gap: 15px;
	align-items: flex-start;
}

.options-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.options-row .option-item {
  flex: 1;
  min-width: calc(50% - 8px); /* 两列布局，考虑间距 */
}

/* 确保在小屏幕上自动调整为单列 */
@media (max-width: 768px) {
  .options-row .option-item {
    min-width: 100%;
  }
}

.option-item {
padding: 12px 15px;
border: 1px solid #e4e7ed;
border-radius: 6px;
transition: all 0.3s;
text-align: left;
}

.option-item:hover {
border-color: #409eff;
background-color: #f0f7ff;
}

.option-letter {
font-weight: 600;
color: #409eff;
margin-right: 8px;
}

/* 判断题特殊样式 */
.judge-group {
flex-direction: row;
gap: 20px;
}

.judge-item {
flex: 1;
text-align: center;
}

/* 可点击整行样式 */
.option-item.clickable {
  cursor: pointer;
}

.option-item.clickable .el-radio {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 简答题文本框样式 */
.answer-textarea {
width: 100%;
border-radius: 6px;
font-size: 16px;
padding: 12px;
}

/* 题目导航按钮样式 */
.question-nav-buttons {
display: flex;
gap: 20px;
justify-content: flex-end;
margin-top: 30px;
}

/* 右侧题号导航区样式 */
.question-navigator {
width: 280px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 20px;
height: fit-content;
position: sticky;
top: 20px;
margin-top: 20px;
}

.navigator-title {
font-size: 18px;
color: #333;
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #f2f2f2;
}

/* 题号容器样式 */
.question-numbers {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 25px;
}

.question-number-item {
width: 40px;
height: 40px;
border-radius: 6px;
background-color: #f5f7fa;
color: #666;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid transparent;
}

/* 题号状态样式 */
.question-number-item.active {
background-color: #409eff;
color: #ffffff;
border-color: #409eff;
}

.question-number-item.answered {
background-color: #f0f9eb;
color: #67c23a;
border-color: #67c23a;
}

.question-number-item.unanswered {
background-color: #fef0f0;
color: #f56c6c;
border-color: #f56c6c;
}

.question-number-item:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 图例样式 */
.navigator-legend {
display: flex;
gap: 15px;
flex-wrap: wrap;
font-size: 12px;
color: #666;
}

.legend-item {
display: flex;
align-items: center;
gap: 5px;
}

.legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}

.legend-dot.active {
background-color: #409eff;
}

.legend-dot.answered {
background-color: #67c23a;
}

.legend-dot.unanswered {
background-color: #f56c6c;
}

/* 弹框样式 */
.dialog-content {
padding: 10px 0;
}

.number-input {
width: 100%;
margin-bottom: 15px;
}

.tip-text {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.5;
}

.submit-confirm-content {
padding: 10px 0;
}

.warning-text {
color: #e6a23c;
font-size: 16px;
line-height: 1.6;
margin: 0;
}

.success-text {
color: #67c23a;
font-size: 16px;
line-height: 1.6;
margin: 0;
}

/* 提交结果弹框样式 */
.submit-result-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
}

.result-icon {
margin-bottom: 20px;
}

.result-icon.success {
color: #67c23a;
}

.result-title {
font-size: 20px;
color: #333;
margin-bottom: 25px;
margin-top: 0;
}

.result-stats {
width: 100%;
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 25px;
}

.stat-item {
display: flex;
font-size: 16px;
}

.stat-label {
width: 120px;
color: #666;
}

.stat-value {
color: #333;
font-weight: 500;
}

.result-tip {
font-size: 14px;
color: #666;
text-align: center;
margin: 0;
line-height: 1.5;
}

/* 无题目提示样式 */
.no-question {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
color: #666;
font-size: 16px;
}

.no-question el-button {
margin-top: 20px;
}
</style>
